<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>《星区》官方网站 - 游戏下载平台</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

  .carousel {
      width: 1020px;
      height: 300px;
      position: absolute;
      top: 50px;
      margin: 50px auto;
      overflow: hidden;
      position: relative;
    }

  .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 300px;
      width: 1020px;
    }

  .slide {
      flex: 0 0 100%;
      height: 100%;
      object-fit: cover;
    }

  .left {
      position: absolute;
      left: 0px;
      top: 125px;
      height: 30px;
    }

  .right {
      position: absolute;
      right: 0px;
      top: 125px;
      height: 30px;
    }

   /* 热门游戏样式 */
 .热门game {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
    }

 .热门game p {
      margin-bottom: 5px;
    }

 .图片11 {
      width: 100px;
      height: 100px;
      object-fit: cover;
      margin-right: 10px;
    }

   /* 媒体查询 - 响应式样式 */
   /* 当屏幕宽度小于等于 768px（常见的手机屏幕宽度范围）时的样式 */
  @media (max-width: 768px) {
   .carousel {
      width: 100%;
      height: 200px;
      margin: 20px auto;
    }
   .slides {
      height: 200px;
    }
   .slide {
      object-fit: contain; /* 在小屏幕上让图片完整显示，可能会有留白 */
    }
   .left,
  .right {
      height: 20px;
      top: 90px;
    }
   .游戏发布 img {
      width: 80%; /* 调整新游图片在小屏幕上的宽度 */
    }
   .热门game img {
      width: 80%; /* 调整热门游戏图片在小屏幕上的宽度 */
    }
   .头部 p {
      font-size: 14px; /* 调整头部文字大小 */
    }
  }
  </style>

  <link rel="stylesheet" href="/星区.css">
</head>

<body>
  <div class="carousel">
    <div class="slides">
      <img src="/宣传图.png" class="slide">
      <img src="/宣传图1.png" class="slide">
    </div>
    <div class="controls">
      <img src="/箭头.png" alt="" id="prevBtn" class="left">
      <img src="/箭头2.png" alt="" id="nextBtn" class="right">
    </div>
  </div>

  <div class="游戏发布">
    <div class="最新发布">
      <p>游戏公布/发布</p>
      <p class="游戏1"></p>
      <img src="/神话九州.png" alt="" class="图片1">
      <p class="新游名称1">神话九州</p>
    </div>
  </div>

  <div class="热门game">
    <div class="热门">
      <p>热门游戏</p>
      <p class="游戏11"></p>
      <img src="/神话九州.png" alt="" class="图片11">
      <p class="新游名称11">神话九州</p>
    </div>
  </div>

  <div class="头部">
    <a href="index.html"><img src="/星区.png" alt="" class="星区"></a>
    <p class="首页">首页</p>
    <p class="内测">游戏内测</p>
    <p class="计划">开发者计划</p>
    <p class="关于">关于</p>
    <p class="客服">客服</p>
  </div>

  <script>
    const slides = document.querySelector('.slides');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentIndex = 0;

    function showSlide(index) {
      slides.style.transform = `translateX(-${index * 100}%)`;
      currentIndex = index;
    }

    prevBtn.addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + slides.children.length) % slides.children.length;
      showSlide(currentIndex);
    });

    nextBtn.addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % slides.children.length;
      showSlide(currentIndex);
    });

    showSlide(currentIndex);
  </script>
</body>

</html>